<template>
  <div class="w-full h-full overflow-y-auto overflow-x-hidden  border-t border-gray-200 pt-[20px]">
    <header class="flex items-center justify-between mb-[12px]">
      <div class="mb-[8px] text-[14px] text-[#333] font-medium">表格设置</div>
      <el-button :icon="Trash2" link @click="emit('delete')"></el-button>
    </header>

    <el-form>
      <div class="border-b-[1px] border-[#E5E5E5] mb-[16px]">
        <!-- 背景设置（圆形取色器） -->
        <el-form-item :label="$t('competition.modules.table.backgroundSettings')">
          <el-color-picker v-model="model.bgColor" :style="{ backgroundColor: model.bgColor }" />
        </el-form-item>
      </div>

      <!-- 表格编辑（支持右键菜单/合并/插入删除行列/对齐等） -->
      <el-form-item label="" label-position="top">
        <div class="w-full overflow-auto">
          <CustomTable :table-config="model.tableConfig" @update:tableConfig="onUpdate" />
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { Trash2 } from '@vben/icons'
import { $t } from '#/locales'
import CustomTable from '#/components/custom-table.vue'

export interface TableState {
  bgColor: string
  tableConfig: {
    data: string[][]
    config: {
      mergedCells: any[]
      cellStyles: any[]
      columnWidths: number[]
      colHeaders: string[]
    }
  }
}

const model = defineModel<TableState>({ required: true })
const emit = defineEmits<{ delete: [] }>()

function onUpdate(conf: any) {
  model.value.tableConfig = conf
}
</script>
